<template>
  <el-table
      :data="tableData"
      :max-height="tableMaxHeight"
      :height="tableHeight"
      style="width: 100%"
      size="small"
      border
  >
    <template v-for="item in tableHeader">
      <DynamicColumn
          v-if="item.children && item.children.length"
          :columnHeader="item"
      ></DynamicColumn>
      <el-table-column
          v-else
          :fixed="item.fixed"
          :label="item.label"
          :prop="item.prop"
          :sortable="item.sort"
          header-align="center"
          :align="item.align"
          :width="item.width"
          :show-overflow-tooltip="true"
      >
        <template #default="scope">
          {{ scope.row[item.prop] }}
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script setup >
import DynamicColumn from "./dynamic-column.vue";
//其中 tableHeight 是为了控制表格高度，非必需
const props = defineProps(["tableData", "tableHeader", "tableHeight" ,"tableMaxHeight"]);

</script>
<style scoped lang="scss">
</style>
